<template>
	<div class="page">
		<h1>{{title}}的详情页</h1>
		<input type="text" v-model="title" class="input" />
		<button class="input" @click="modify()">修改title</button>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				title:""
			}
		},
		methods:{
			modify(){
				//使用非父子组件传值给home父页面
				this.center.$emit("detail-home",{
					title:this.title,
					index:this.$route.params.index
				})
			}
		},
		created(){
			//取得路由(父页面)传进来的值
			console.log(this.$route.params)
			this.title = this.$route.params.title;
		}
	}
</script>

<style>
	.input{
		width: 80%;
		height: 40px;
		margin-left: 20px;
		border-radius: 10px;
		font-size: 18px;
		padding-left: 8px;
	}
</style>